<template>
  <div>
    <swiper ref="mySwiper" :options="swiperOptions" id="newsongs_hook">
      <swiper-slide v-for="(item,index) in data" :key="index" class="newsong_item">
        <div class="newsong_item_l" @click="selectItem(item,index)">
          <div class="newsong-pic" v-lazy:background-image="(item.image)+'?param=55y55'"></div>
          <div class="newsong-detail">
            <h4>{{item.name}}</h4>
            <div class="singer">
              <i class="iconfont icondujia dujia" v-if="item.exclusive"></i>
              <span>{{item.singer}}</span>
            </div>
          </div>
        </div>
        <i class="iconfont iconbofangyinle"></i>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { createSearchSongs } from "@/common/song.js";
import { mapActions } from "vuex";
import "swiper/css/swiper.css";

export default {
  props: {
    data: {
      type: Array
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      banners: [],
      swiperOptions: {
        loop: false,
        speed: 800,
        autoplay: {
          delay: 50000
        },
        effect: "slide",
        setWrapperSize: true,
        slidesPerView: "auto",
        slidesPerColumnFill: "column",
        slidesPerColumn: 3, //显示3行
        reachEnd: function() {
          console.log("atlast");
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted() {},
  methods: {
    ...mapActions(["insertSong", "selectPlay"]),
    selectItem(data, index) {
      // 设置顺序播放，歌单为父组件传递进来,索引为当前索引
      this.selectPlay({
        list: this.data,
        index: index
      });
    }
  }
};
</script>

<style lang="less" scoped>
#newsongs_hook {
  height: 210px;
  //   margin-left: 25px;
  margin-left: 0.3333rem;
}
.newsong_item {
  .flex-nowrap-sb(center);
  height: 55px;
  margin-bottom: 15px;
  width: 8.7rem;
  margin-right: 0.6rem;
}
.newsong_item_l {
  .flex-row-nowrap(center);
  flex: 1 1 auto;
  overflow: hidden;
  .newsong-pic {
    width: 55px;
    height: 55px;
    .bz(contain);
    border-radius: 5px;
    margin-right: 10px;
  }
}
.iconbofangyinle {
  display: inline-block;
}
.newsong-detail {
  flex: 1;
  overflow: hidden;
  height: 55px;
  > h4 {
    font-size: 16px;
    line-height: 24px;
    height: 24px;
    .sl;
    span {
      font-size: 12px;
      color: #888;
      margin-left: 1px;
    }
  }
  .singer {
    line-height: 1;
    height: 24px;
    .flex-row-nowrap;
    margin-top: 4px;
    i.iconfont {
      font-size: 24px;
      color: @mc;
      margin-right: 5px;
    }
    span {
      font-size: 12px;
      color: #999;
      &:last-child {
        i {
          display: none;
        }
      }
    }
  }
}
</style>